{extend name="common/layout" /}
{block name="main"}
<div class="admin-main layui-anim layui-anim-upbit">
    <div class="padding30">
        <h3 class="page-box-title">{$title}</h3>
        <div class="demoTable">
            <div class="layui-inline">
                <input class="layui-input layui-search-input" name="key" id="key" placeholder="{:lang('Please enter the keyword')}">
            </div>
            <button class="layui-btn layui-search-btn" id="search" data-type="reload">{:lang('Search')}</button>
            <div style="clear: both;"></div>
        </div>
    </div>
    <div class="" id="_listBox">
        <div style="text-align: right;"><a data-href="{:url('create')}" href="#" class="layui-btn layui-btn-normal layui-btn-add borderrad5 _showmodel " title="{:lang('Add')}" ><i class="icon icon-plus"></i></a></div>
        <table class="layui-table" id="list" lay-filter="list"></table>
    </div>
</div>
{/block}
{block name="footer"}
<script type="text/html" id="order">
    <input name="{{d.id}}" data-id="{{d.id}}" class="list_order layui-input" value=" {{d.sort}}" size="10"/>
</script>
<script type="text/html" id="order">
    <input name="{{d.id}}" data-id="{{d.id}}" class="list_order layui-input" value=" {{d.sort}}" size="10"/>
</script>
<script type="text/html" id="_name" >
    {{# if(d.icon !='' && d.icon != null){ }}
        <img src="{{d.icon}}" width="25">
    {{# } }}
     {{d.name}}
</script>
<script type="text/html" id="action">
    <a class="l" href="{:url('citys')}?country_id={{d.id}}">{:lang('City List')}</a> |
    <a data-href="{:url('create')}?id={{d.id}}" href="#" class=" _showmodel">{:lang('Edit')}</a> |
    <a class="" lay-event="delete">{:lang('Delete')}</a> 
</script>
   <script type="text/javascript">
   	layui.use('table', function() {
   		 var table = layui.table, $ = layui.jquery,form = layui.form;
   		 var tableIn = table.render({
            elem: '#list'
            ,url: '{:url("index")}',
            method:'post',
            page:getPageThume(),
            cellMinWidth: 150,
            layout:['prev', 'page', 'next']
            ,cols: [[
                 {field:'id', title: "{:lang('ID')}", width:"10%",sort:true},
                {field:'name', title: "{:lang('Name')}", width:"20%",sort:true,templet: '#_name'},
                {field:'name_en', title: "{:lang('Name')}", width:"20%",sort:true},
                // {field: 'status', align: 'center', title: '{:lang("Status")}', width:"10%", toolbar: '#status'},
                // {field: 'sort', align: 'center', title: '{:lang("Sort")}', width: "10%", templet: '#order',sort:true}
                {title: "", align:'right', toolbar: '#action',width:"20%"}
            ]]
        });
         //搜索
        $('#search').on('click', function () {
            var key = $('#key').val();
            tableIn.reload({
                where: {key: key}
            });
        });
         table.on('tool(list)', function(obj) {
            var data = obj.data;
            if (obj.event === 'delete'){
                layer.confirm('{:lang("Are you sure you want to delete the record?")}', function(index){
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('delete')}",{id:data.id},function(res){
                        layer.close(loading);
                        if(res.code===1){
                            obj.del();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        
         $('body').on("click",'._showmodel',function(){
          var url = $(this).data('href');
          layer.open({
            type: 2, //此处以iframe举例
            title: "{$title}",
            area: ['760px', '550px'],
            shade: 0.7,
            maxmin: true,
            content:url
         })
       })
   	})
   </script>
{/block}